<template>
  <el-dialog :title="title" :width="width"
             :visible.sync="isShowVisible"
             center :close-on-click-modal="false"
             :before-close="() => this.close(false)">
    <el-card>
      <el-form label-width="105px" :model="data" ref="data" :rules="rules" v-loading="isLoading">
        <el-row>
            <el-form-item label="KEY:" prop="fkey" >
              <el-input v-model="data.fkey" :disabled="isview"></el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="API:" prop="fapiid" >
              <el-select v-model="data.fapiid" filterable placeholder="请选择" :disabled="isview">
                <el-option
                    v-for="item in baseApiList"
                    :key="item.fid"
                    :label="item.fname" 
                    :value="item.fid">
                </el-option>
              </el-select>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="名称:" prop="fname" >
              <el-input v-model="data.fname" :disabled="isview"></el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="URL:" prop="furl" >
              <el-input v-model="data.furl" :disabled="isview"></el-input>
            </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer"  v-if="!isview">
      <el-button type="primary" @click="saveData">保存</el-button>
      <el-button @click="close(false)">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import SubApiUrlK3cloud from '@/api/module/SubApiUrlK3cloud'
  import BaseApi from '@/api/module/BaseApi'
  export default {
    name: 'k3cloudurl_edit',
    props:{
      width : {type : String , default : '40vw'},
      fid : {type : Number , },
      status : {type : String ,default : 'add'}
    },
    data(){
      return{
        title : '',
        isShowVisible : true,
        isview : false,
        rules:{
          fkey : [{required: true, message: '请填写KEY', tirgger: 'blur'}],
          fname : [{required: true, message: '请填写名称', tirgger: 'blur'}],
          furl : [{required: true, message: '请填写URL', tirgger: 'blur'}],
          fapiid: [{required: true, message: '请选择API', trigger: 'change' }],
        },
        data : {fapiid:''},
        isLoading : false,
        api : new SubApiUrlK3cloud(),
        baseApi : new BaseApi(),
        baseApiList: [],
      }
    },
    mounted(){
    },
    async created(){
      this.isLoading = true
      this.baseApi.queryListPage({ftypeInt:1,pageNo: 1,pageSize: 999}).then(res => {
          this.baseApiList = res.data.rows
      })
      if(this.status == 'add'){
          this.title = '新增';
      }else{
        if(this.status == 'edit'){
          this.title = '编辑'
        }else if(this.status == 'view'){
          this.title = '查看';
          this.isview = true;
          this.rules = {};
        }
        let data = await this.api.detail({fid:this.fid});
        this.data =  data.data
      }
      this.isLoading = false
    },
    methods:{
      saveData(){
        this.$refs['data'].validate((valid, object) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '请耐心等待.....',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            if(this.status == 'add'){
                this.api.add(this.data).then(res => {
                    this.$tie.showSuccess(res.message)
                    this.close(true)
                    loading.close()
                }).catch(e => {
                    loading.close()
                })
            }else if(this.status == 'edit'){
                this.api.update(this.data).then(res => {
                    this.$tie.showSuccess(res.message)
                    this.close(true)
                    loading.close()
                }).catch(e => {
                    loading.close()
                })
            }
          }
        })
      },
      close(isOk){
        this.$emit('close',isOk)
      }
    },
  }
</script>
<style scoped>
</style>
